1<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>11</li>
      <li class="active">
        22
        <span>我是span</span>
      </li>
      <li>333</li>
    </ul>
    <!-- <button>点击我删除元素</button> -->
    <button>点击我替换元素</button>

    <script>
      //dom的操作: 增 : 一.新建一个元素  二.把新建的元素添加到置顶位置    查
      //一.删除dom元素
      //1.自身元素.remove();
      /*  var lis = document.querySelectorAll("li");
      lis.forEach(function (item) {
        item.onclick = function () {
          this.remove(); //删除自身元素
        };
      }); */

      //2.父级元素.removeChild(子元素);
      /*  var btn = document.querySelector("button");
      var ulEle = document.querySelector("ul");
      var activeEle = document.querySelector(".active");
      btn.onclick = function () {
        ulEle.removeChild(activeEle);
      }; */

      //二.替换元素
      //父级元素.replaceChild(newElement,oldElement);
      /*  var ulEel = document.querySelector("ul");
      var activeEle = document.querySelector(".active");
      var btn = document.querySelector("button");
      var newElement = document.createElement("li");
      newElement.innerHTML = "我是新的li元素";
      btn.onclick = function () {
        ulEel.replaceChild(newElement, activeEle);
      }; */

      //三.克隆元素  元素.cloneNode();
      //cloneNode(): 可以传参 默认是false 不会克隆子元素  如果是true  name克隆子元素
      var ulEle = document.querySelector("ul");
      var activeEle = document.querySelector(".active");
      var cloneEle = activeEle.cloneNode(true); //把active元素克隆一份新的出来
      var btn = document.querySelector("button");
      btn.onclick = function () {
        ulEle.appendChild(cloneEle);
      };
    </script>
  </body>
</html>
